<template>
  <div>
    <el-dialog :visible.sync="showMap" title="搜索后选择地址">
      <div class="map-wrap">
        <el-amap-search-box class="map-search" :on-search-result="onSearchResult" :searchOption="{}" />
        <el-amap class="map" :center="mapCenter" :zoom="16">
          <el-amap-marker v-for="(marker, index) in markers" :key="index" :position="marker" :events="getMarkerEvents()" />
        </el-amap>
      </div>
    </el-dialog>
    <div class="mod-demo-ueditor" v-loading="dataListLoading" element-loading-text="拼命加载中">
      <el-form :model="dataForm" :disabled="dataForm.trialPictureState == 1" :rules="dataRule" ref="dataForm" @keyup.enter.native="dataFormSubmit()" label-width="auto">

        <el-form-item label-width="0" v-if="dataForm.trialPictureState == 1">
          <el-alert
            title="待审核"
            type="warning"
            show-icon>
          </el-alert>
        </el-form-item>
        <el-form-item label-width="0" v-if="dataForm.trialPictureState == 3">
          <el-alert
            show-icon
            title="审核失败"
            type="warning"
            :description="dataForm.trialMsg">
          </el-alert>
        </el-form-item>

        <el-form-item label="门头照" prop="ewmLogo">
          <el-upload class="avatar-uploader" :action="uploadAction" :show-file-list="false" :on-success="handleAvatarSuccess" :before-upload="beforeAvatarUpload">
            <img v-if="dataForm.ewmLogo" :src="dataForm.ewmLogo" class="avatar" />
            <i v-else class="el-icon-plus avatar-uploader-icon"></i>
          </el-upload>
        </el-form-item>
        <el-form-item label="图片" prop="img">
          <el-upload
            :file-list="fileList"
            list-type="picture-card"
            :action="uploadAction"
            :on-preview="handlePictureCardPreview"
            :on-success="handleImageSuccess"
            :on-remove="handleImageRemove"
            :before-upload="beforeAvatarUpload"
            multiple
            :limit="99"
          >
            <i class="el-icon-plus"></i>
          </el-upload>
        </el-form-item>
      </el-form>
      <span class="dialog-footer">
        <el-button v-if="dataForm.trialPictureState == 1" disabled>待审核</el-button>
        <el-button v-if="dataForm.trialPictureState == 2" type="primary" @click="dataFormSubmit()">{{ $t('Common.Confirm') }}</el-button>
        <el-button v-if="dataForm.trialPictureState == 3" type="primary" @click="dataFormSubmit()">重新提交</el-button>
      </span>
    </div>
    <gallery :images="[showImage]" :index="index" @close="index = null" />
  </div>
</template>

<script>
import VueGallery from 'vue-gallery';
import axios from 'axios';
export default {
  components: {
    gallery: VueGallery
  },
  data() {
    return {
      index: null,
      showImage: [],
      visible: false,
      markers: [],
      mapCenter: [114.05558, 22.539679],
      showMap: false,
      inputVisible: false,
      inputValue: '',
      dataListLoading: false,
      content: '111',
      editorOption: {},
      uploadAction: '',
      dialogVisible: false,
      topics: [],
      facility: [],
      fileList: [],
      brandOptions: [{}],
      props: {
        label: 'name',
        value: 'id',
        children: 'brands'
      },
      dataForm: {
        id: 0,
        img: '',
        bqLogo: '',
        ewmLogo: '',
      },
      dataRule: {

      }
    };
  },
  activated() {
    this.uploadAction = this.$http.adornUrl(`/sys/oss/upload?token=${this.$cookie.get('token')}`);
    this.init();
  },
  methods: {
    //预览
    handlePictureCardPreview(file) {
      this.index = 0;
      this.showImage = file.url;
    },
    getImgs(img) {
      return (img || '')
        .split(',')
        .filter(url => !!url)
        .map(url => ({
          name: url,
          url
        }));
    },
    init() {
      this.dataListLoading = true;
      this.$http({
        url: this.$http.adornUrl(`/hotel/hotelseller/store/2`),
        method: 'get',
        params: this.$http.adornParams()
      }).then(({ data }) => {
        if (data && data.code === 0) {
          const hotelSeller = data.hotelSeller || {};
          this.dataForm = {
            id:hotelSeller.id,
            trialPictureState: hotelSeller.trialPictureState,
            trialMsg: hotelSeller.trialMsg,
            ewmLogo: hotelSeller.ewmLogo,
            bqLogo: hotelSeller.bqLogo,
          };
          this.fileList = this.getImgs(hotelSeller.img);
        }
        this.dataListLoading = false;
      });
    },
    // 表单提交
    dataFormSubmit() {
      //图片
      console.log(this.dataForm.facility);
      this.$refs['dataForm'].validate(valid => {
        if (valid) {
          this.$http({
            url: this.$http.adornUrl(`/hotel/hotelseller/pictureUpdate`),
            method: 'post',
            data: this.$http.adornData({
              id: this.dataForm.id || undefined,
              ewmLogo: this.dataForm.ewmLogo,
              img: this.dataForm.img,
              bqLogo: this.dataForm.bqLogo
            })
          }).then(({ data }) => {
            if (data && data.code === 0) {
              this.init()
              this.$message({
                message: this.$t('Common.OperationSuccessful'),
                type: 'success',
                duration: 1500,
                onClose: () => {

                }
              });
            } else {
              this.$message.error(data.msg);
            }
          });
        }
      });
    },

    onEditorBlur() {},
    onEditorFocus() {
      //获得焦点事件
    },
    onEditorChange() {
      //内容改变事件
    },
    handleClose(tag) {
      this.dataForm.tagList.splice(this.dataForm.tagList.indexOf(tag), 1);
    },

    showInput() {
      this.inputVisible = true;
      this.$nextTick(_ => {
        this.$refs.saveTagInput.$refs.input.focus();
      });
    },

    handleInputConfirm() {
      let inputValue = this.inputValue;
      if (inputValue) {
        this.dataForm.tagList.push(inputValue);
      }
      this.inputVisible = false;
      this.inputValue = '';
    },
    handleAvatarSuccess(res, file) {
      this.dataForm.ewmLogo = res.url;
    },

    handleImageSuccess(res, file, fileList) {
      console.log(fileList)
      var list = [];
      fileList.forEach(item =>{
        if (item.status== 'success') {
          list.push(item.response.url);
        }
      })
      this.dataForm.img = list.join(',');
    },
    handleImageRemove(file, fileList) {
      this.handleImageSuccess({}, file, fileList);
    },
    beforeAvatarUpload(file) {
      const isLt2M = file.size / 1024 / 1024 < 2;

      if (!isLt2M) {
        this.$message.error('上传头像图片大小不能超过 2MB!');
      }
      return isLt2M;
    }
  }
};
</script>
<style lang="scss">
.avatar-uploader .el-upload {
  border: 1px dashed #d9d9d9;
  border-radius: 6px;
  cursor: pointer;
  position: relative;
  overflow: hidden;
}
.avatar-uploader .el-upload:hover {
  border-color: #409eff;
}
.avatar-uploader-icon {
  font-size: 28px;
  color: #8c939d;
  width: 148px;
  height: 148px;
  line-height: 148px;
  text-align: center;
}
.avatar {
  width: 148px;
  height: 148px;
  display: block;
}
.mod-demo-ueditor {
  position: relative;
  z-index: 510;
  > .el-alert {
    margin-bottom: 10px;
  }
}
.el-tag + .el-tag {
  margin-left: 10px;
}
.button-new-tag {
  margin-left: 10px;
  height: 32px;
  line-height: 30px;
  padding-top: 0;
  padding-bottom: 0;
}
.input-new-tag {
  width: 190px;
  margin-left: 10px;
  vertical-align: bottom;
}
.mod-demo-ueditor {
  position: relative;
  z-index: 510;
  > .el-alert {
    margin-bottom: 10px;
  }
}
.map-wrap {
  position: relative;

  .map {
    height: 400px;
  }

  .map-search {
    position: absolute;
    left: 20px;
    top: 20px;
  }
}
</style>
